<template>
<div class="main">
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="直播热门榜" name="first">
      <div class="data">
      <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
        <el-radio-button label="1">日榜</el-radio-button>
        <el-radio-button label="2">周榜</el-radio-button>
        <el-radio-button label="3">月榜</el-radio-button>
      </el-radio-group>
      <div class="block">
        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="see">
        <el-checkbox v-model="checked">正在直播</el-checkbox>
      </div>
      <el-popover
        placement="right-end"
        title="直播热门榜介绍:"
        width="800"
        trigger="hover"
      >
        <p>
         1. 直播热门榜是将各播主直播间的热度值进行排序后的榜单，默认按观看人次排序。
        </p>
        <p>2.</p>
        <p slot="reference" style="font-size: 14px">
          淘宝/天猫 - 直播热门榜【 统计时间: 9月29日】<i
            class="el-icon-question"
          ></i>
        </p>
      </el-popover>
    </div>
    <div class="btn">
      <div class="box">
        <span><i class="el-icon-question">数据说明</i></span>
        <button class="btn1"><i class="el-icon-download"></i>导出视频列表</button>
      </div>
    </div>
    <div class="table">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="直播间" >
            </el-table-column>
            <el-table-column prop="name" label="博主" width="420">
            </el-table-column>
            <el-table-column prop="province" label="直播销量" width="170">
            </el-table-column>
            <el-table-column
              prop="city"
              label="直播销售额"
              width="150"
              style="color: red"
            >
            </el-table-column>
            <el-table-column prop="address" label="本场点赞" width="150">
            </el-table-column>
            <el-table-column prop="address1" label="观看人次" width="120">
            </el-table-column>
            <el-table-column prop="address" label="本场涨粉" width="120">
            </el-table-column>
            <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
          </el-table>
        </div>
    </el-tab-pane>
    <el-tab-pane label="直播带货帮" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="直播小时榜" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="直播实时热榜" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'first',
        tabPosition:'1',
        value1:'',
        checked:false,
        tableData: [{
          date: '1',
          name: '全网低价。苹果13最低价，粉丝福利大放送',
          province: '李佳琪',
          city: '2022年十月一',
          address: '2999',
          zip: 200333
        }, {
          date: '2',
          name: '全网低价。苹果13最低价，粉丝福利大放送',
          province: '李佳琪',
          city: '2022年十月一',
          address: '643',
          zip: 200333
        }, {
          date: '3',
          name: '全网低价。苹果13最低价，粉丝福利大放送',
          province: '李佳琪',
          city: '2022年十月一',
          address: '782',
          zip: 200333
        }, {
          date: '4',
          name: '全网低价。苹果13最低价，粉丝福利大放送',
          province: '李佳琪',
          city: '2022年十月一',
          address: '881',
          zip: 200333
        }, {
          date: '5',
          name: '全网低价。苹果13最低价，粉丝福利大放送',
          province: '李佳琪',
          city: '2022年十月一',
          address: '3469',
          zip: 200333
        }, {
          date: '6',
          name: '全网低价。苹果13最低价，粉丝福利大放送',
          province: '李佳琪',
          city: '2022年十月一',
          address: '9621',
          zip: 200333
        }, {
          date: '7',
          name: '全网低价。苹果13最低价，粉丝福利大放送',
          province: '李佳琪',
          city: '2022年十月一',
          address: '1399',
          zip: 200333
        }]
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }
</script>

<style lang="less" scoped>
   .btn{
    width: 100%;
    position: relative;
    margin: 15px 0;
    .box{
      height: 26px;
      width: 300px;
      position: absolute;
      right: 20px;
      display: flex;
      align-items: center;
    span{
      color: #506eff;
    }
    .btn1{
      height: 26px;
      width: 120px;
      background: #8351fe;
      border: 0;
      border-radius: 20px;
      color: #fff;
    }
  }
  }
  .main :deep(.is-active){
      color: #506eff;
    }
  .main :deep(.el-tabs__active-bar)  {
      background-color: #506eff;
    }
  .table {
    margin-top: 15px;
  }
  .see{
    width: 97px;
    height: 32px;
    border: 1px solid #dcdfe6;
    line-height: 32px;
  }
  .data {
    width: 900px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    border-left: 4px solid #506eff;
    .el-radio-group {
      margin-bottom: 0 !important;
    }
    :deep(.el-radio-button__inner){
      padding: 9px 15px;
    }
    :deep(.el-input__inner){
      height: 35px !important;
    }
  }
  .search {
    width:650px;
    display: flex;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 15px;
    span {
      width: 102px;
      color: #303133;
      font-weight: 700;
      font-size: 14px;
      margin-right: 20px;
    }
  }
  .cate {
    width: 1538px;
    display: flex;
    align-items: center;
  
    :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
      background-color: #506eff;
      display: inline-block;
      height: 32px;
      line-height: 32px;
      margin: 0 12px 6px 0;
      border-radius: 8px;
      padding: 0 6px;
      cursor: pointer;
    }
    span {
      width: 102px;
      color: #303133;
      font-weight: 700;
      font-size: 14px;
    }
    :deep(.el-radio-button--small .el-radio-button__inner) {
      display: inline-block;
      height: 32px;
      line-height: 32px;
      margin: 0 12px 6px 0;
      border-radius: 8px;
      padding: 0 6px;
      cursor: pointer;
      border: 0;
      font-size: 14px;
    }
    :deep(.el-radio-button--small .el-radio-button__inner):hover {
      background-color: #506eff;
      color: #fff;
    }
  }
  .cate1 {
    width: 93%;
    display: flex;
    align-items: center;
  
    :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
      background-color: #506eff;
      display: inline-block;
      height: 32px;
      line-height: 32px;
      margin: 0 12px 6px 0;
      border-radius: 8px;
      padding: 0 6px;
      cursor: pointer;
    }
    span {
      width: 7%;
      color: #303133;
      font-weight: 700;
      font-size: 14px;
    }
    :deep(.el-radio-button--small .el-radio-button__inner) {
      display: inline-block;
      height: 32px;
      line-height: 32px;
      margin: 0 12px 6px 0;
      border-radius: 8px;
      padding: 0 6px;
      cursor: pointer;
      border: 0;
      font-size: 14px;
    }
    :deep(.el-radio-button--small .el-radio-button__inner):hover {
      background-color: #506eff;
      color: #fff;
    }
  }
  .sel {
    width: 607px;
    margin-bottom: 15px;
  
    :deep(.el-input__inner) {
      width: 400px;
    }
  }
  .table {
    color: black;
    margin-top: 50px;
    :deep(.el-table thead) {
      color: black;
    }
  }
  </style>